<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
request.setAttribute("basePath", basePath);
String opNumberInfoJson= (String)request.getAttribute("opNumberInfoJson");
String success= (String)request.getAttribute("success");
%>
<link href="${basePath}/static/css/Pigeonhole/Pigeonhole_list.css"
	rel="stylesheet" type="text/css">
<link rel="stylesheet"
	href="${basePath}/static/css/medicalRecord_Search/medicalSearch.css" />
<script type="text/javascript"
	src="${basePath}/static/publics/assets/jqPaginator/jqPaginator.js"></script>
	<script type="text/javascript" src="${basePath}assets/js/echarts.js"></script>
<div class="list_NR">
	<div class="loc">
		<h3>统计报告</h3>
		<ul class="loc_loc">手术及操作人次数
		</ul>
	</div>

	<div class="list_con_table">
	
	<form id="infoListForm">
	<table style="width:100%;" cellpadding="0" cellspacing="0" id="table">
<tbody>
	<tr>
		
		<td colspan="6" style="text-align:right;">
			<input type="button" value="导出" class="btn"  onclick="exportOpNumWord()"/>
			<input type="button" value="保存" class="btn"  onclick="saveOpNumInfo()"/>
		</td>
	</tr>
	
			<tr >
				 <td class="tdLabel_7" style="width:10%">
				 	手术及操作
				 </td>
				<td class="tdLabel_8" colspan="7" style="width:988px">
					<textarea style="width:97%;height:280px" name="opRatioText">${opNumberInfo.opRatioText}</textarea>
				</td>
			</tr>
			
			
			<tr>
			   <td class="tdLabel_7">手术及操作说明</td>
				<td class="tdLabel_8" colspan="7" style="width:988px">
					<textarea style="width:97%;height:150px" id="opRateNote" name="opRateNote">${opNumberInfo.opRateNote}</textarea>
				</td>
			</tr>
			
			
			<tr >
				 <td class="tdLabel_7">
				 	节假日手术及操作
				 </td>
				<td class="tdLabel_8"  colspan="7" style="width:988px">
					<textarea style="width:97%;height:280px" name="thirdForthOpRatioText">${opNumberInfo.thirdForthOpRatioText}</textarea>
				</td>
			</tr>
			
			<tr>
			   <td class="tdLabel_7">节假日手术及操作说明</td>
				<td class="tdLabel_8" colspan="7" style="width:988px">
					<textarea style="width:97%;height:150px" id="thirdForthOpRatioNote" name="thirdForthOpRatioNote">${opNumberInfo.thirdForthOpRatioNote}</textarea>
				</td>
			</tr>
			
			
			 <tr>
				 <td class="tdLabel_7">
				 	图(3)住院患者手术部分统计指标
				 </td>
				<td class="tdLabel_8" colspan="7" style="height:400px;">
						<div id="container" style="height: 400px;width:100%"></div>
					
				</td>
			 </tr>
			 
			  <tr>
				 <td class="tdLabel_7">
				 	图(4)住院患者手术率统计指标
				 </td>
				<td class="tdLabel_8" colspan="7" style="height:400px;">
						<div id="container1" style="height: 400px;width:100%"></div>
					
				</td>
			 </tr>
			 
			  <tr>
				 <td class="tdLabel_7">
				 	图(5)节假日手术统计指标
				 </td>
				<td class="tdLabel_8" colspan="7" style="height:400px;">
						<div id="container2" style="height: 400px;width:100%"></div>
					
				</td>
			 </tr>
			
			
		

			
		</tbody>
</table>
</form>
</div>
</div>
	





<script>
var myChart ;
var myChart1 ;
var myChart2 ;

function saveOpNumInfo(){
     var opRateNote = $("#opRateNote").val();
     var thirdForthOpRatioNote = $("#thirdForthOpRatioNote").val();
     var base64info = myChart.getDataURL();
 	 var base64info1 = myChart1.getDataURL();
     var base64info2 = myChart2.getDataURL();
     
     $.ajax({
         type:'post',
         data:{opRateNote:opRateNote,thirdForthOpRatioNote:thirdForthOpRatioNote,echart1Image:base64info,echart2Image:base64info1,echart3Image:base64info2},
         url:'${basePath}/report/saveOpNumberInfo',
         success:function(data){
        	 layer.alert(data.msg,{icon:1});
         }
     })
      
  

}    

function exportOpNumWord(){
 var base64info = myChart.getDataURL();
 var base64info1 = myChart1.getDataURL();
 var base64info2 = myChart2.getDataURL();
 $.ajax({
  type:"post",
  data:{image:base64info,image1:base64info1,image2:base64info2,method:'getImage'},
  url:"${basePath}/report/exportOpNumInfoWord",
  success:function(data){
     window.location.href ="${basePath}/report/exportOpNumInfoWord?method=export";
  }
})
 
 }



 
 //初始化图表信息
 $(function(){
	var opNumberInfoJson= <%=opNumberInfoJson%>;
	if(null!=opNumberInfoJson){
	   initCharSet(opNumberInfoJson.echartsBaseRecord1);
	   
	   initCharset1(opNumberInfoJson.echartsBaseRecord2);
	  
	  initCharset2(opNumberInfoJson.echartsBaseRecord3);
	}
	
 });
 
 
 
 function initCharset1(params){
 
 
 	var dom = document.getElementById("container1");
	 myChart = echarts.init(dom);
	var app = {};
	option = null;
	app.title = '折柱混合';

	option = {
		tooltip: {
   		  trigger: 'axis',
  		  axisPointer: {
      	  type: 'cross',
      	  crossStyle: {
           	 color: '#999'
       	 }
   	 }
	},

		 legend: {
		        y: 'bottom',
    		data:['手术占比','三四级手术及治疗性操作人占比']
		 },
		 xAxis: [
  	  {
       	  type: 'category',
      	  data: params.monthList,
      	  axisPointer: {
           	 type: 'shadow'
       	 }
    }
	   ],
		 yAxis: [
   	 {
        type: 'value',
        name: '占比',
        min: 0,
        max: 100,
        interval: 10,
        axisLabel: {
            formatter: '{value}'
        }
    }
	 ],
	  series: [
  	  {
      	  name:'手术占比',
       	  type:'bar',
       	  barWidth:50,
      	  data:params.data1List
  	  },
  	  {
       	 name:'三四级手术及治疗性操作人占比',
       	 type:'bar',
       	 barWidth:50,
       	 data:params.data2List
   	 }
  
	]
};
;
if (option && typeof option === "object") {
		 myChart.setOption(option, true);
}
 
 
 }
 
 

 

 //charset图表
 function initCharSet(params,arr,max,interval,id){
         
	 var dom = document.getElementById("container");
	 myChart1 = echarts.init(dom);
	 var app = {};
	 option = null;
	 app.title = '折柱混合';

	 option = {
		tooltip: {
    		trigger: 'axis',
   			axisPointer: {
        		type: 'cross',
       			crossStyle: {
            		color: '#999'
        		}
   			 }
			},

		legend: {
		    y: 'bottom',
    		data:params.monthList
		},
			xAxis: [
   		 {
        	type: 'category',
        	data: ['手术及操作人次数','手术及治疗性操作人次数','三四级手术及治疗性操作人次数'],
        	axisPointer: {
            	type: 'shadow'
        	}
   		 }
		],
		yAxis: [
   		 {
      		  type: 'value',
      		  name: '人数',
      		  min: 0,
      		  max: 15000,
       		 interval: 2000,
       		 axisLabel: {
          		  formatter: '{value}'
       		 }
    	 }
		],
		  series: [
   		 {
      		  name:params.monthList[0],
       		  type:'bar',
       		  data:params.data1List
   		 },
   		 {
       		 name:params.monthList[1],
       		 type:'bar',
       		 data:params.data2List
  		  },
   		 {
      		  name:params.monthList[2],
       		  type:'bar',
       		 data:params.data3List
    	 }
			 ]
	};
	;
	if (option && typeof option === "object") {
		myChart1.setOption(option, true);
	}
 }
 
 
 function initCharset2(params){
 	var dom = document.getElementById("container2");
	myChart2 = echarts.init(dom);
	var app = {};
	option = null;
	app.title = '折柱混合';

	option = {
		tooltip: {
    		trigger: 'axis',
   			 axisPointer: {
      			  type: 'cross',
        			crossStyle: {
            		color: '#999'
       				 }
    		}
		},

	legend: {
	    y: 'bottom',
    	data:params.monthList
		 },
	xAxis: [
    {
        type: 'category',
        data: ['手术及治疗性操作人次数','手术治疗人次数','治疗性操作人次数','诊断性操作人次数'],
        axisPointer: {
            type: 'shadow'
        },
		textStyle: {
			fontSize: 10
		}
    }
		 ],
	  yAxis: [
   	 {
        type: 'value',
        name: '人次数',
        min: 0,
        max: 1000,
        interval: 100,
        axisLabel: {
            formatter: '{value}'
        }
    }
	 ],
series: [
    {
        name:params.monthList[0],
        type:'bar',
        data:params.data1List
    },
    {
        name:params.monthList[1],
        type:'bar',
        data:params.data2List
    },
	{
        name:params.monthList[2],
        type:'bar',
        data:params.data3List
    }
	
	
  
]
};
;
if (option && typeof option === "object") {
	  myChart2.setOption(option, true);
}
 }
 
 




	
</script>